import React, {useState} from 'react'
import Context from './Context.jsx';
import * as antd from 'antd'
export default function ChildA(){
    const appContext = React.useContext(Context);
    const [name,setName] = useState(appContext.state.name);

    const [age,setAge] = useState(appContext.state.age);

       return (
        <div>
            ChildA：
            <br/>name：
            <antd.Input style={{width:100}} value={name} onChange={(v) => { setName(v.target.value)}}></antd.Input>
            <antd.Button type="primary" onClick={ () => {appContext.dispatch({type:"setName",payload:{name}})}}>  setName </antd.Button>

            <br/>age：
            <antd.Input style={{width:100}} value={age} onChange={(v) => { setAge(v.target.value)}}></antd.Input>
            <antd.Button type="primary" onClick={ () => {appContext.dispatch({type:"setAge",payload:{age}})}}>  setName </antd.Button>
        </div>
    )
}